import React from "react";
import { Link, Routes, Route, Outlet } from "react-router-dom";

const Hot = () => {
  return <div>这是热映页面</div>;
};
const Cinema = () => {
  return <div>这是影院页面</div>;
};

const Home = () => {
  return (
    <>
      <div>这是home页面</div>
      <ul>
        <li>
          {/* <Link to="/home/hot">热映页</Link> */}
          <Link to="/home">热映页</Link>
        </li>
        <li>
          <Link to="/home/cinema">影院页</Link>
        </li>
      </ul>

      <hr />

      {/* Outlet相当于是vue的RouterView */}
      <Outlet />
    </>
  );
};
const About = () => {
  return <div>这是about页面</div>;
};

const App = () => {
  return (
    <>
      <h2>react嵌套路由</h2>

      <ul>
        <li>
          <Link to="/home">首页</Link>
        </li>
        <li>
          <Link to="/about">关于页</Link>
        </li>
      </ul>

      <hr />

      <Routes>
        <Route path="/home" element={<Home />}>
          {/* <Route path="hot" element={<Hot />}></Route> */}
          {/* index表示下一级路由的路径和上一级一样 */}

          <Route index element={<Hot />}></Route>
          <Route path="/home/cinema" element={<Cinema />}></Route>
        </Route>

        {/* 动态可选路由 */}
        <Route path="/about" element={<About />}>
          <Route path=":id" element={<About />}></Route>
        </Route>
      </Routes>
    </>
  );
};

export default App;
